<script setup lang="ts">
type Props = {
  type?: 'primary' | 'danger' | 'default'
  size?: 'big' | 'normal'
}
withDefaults(defineProps<Props>(), {
  type: 'default',
  size: 'normal'
})
// const types = ref<string>('')
// types.value = props.type // 这行代码只会执行初始的第一次 只会拿到传入的初始值
// const sizes = ref<string>('')
// sizes.value = props.size
// 传入的响应式数据直接用即可 本身就是响应式的!!!
// ---------------------------------------------------------------------
const emit = defineEmits<{
  (e: 'click'): void
}>()
const Btnclick = () => {
  emit('click')
}
</script>

<template>
  <!-- { red: true/false }  / ['red', 'blue'] -->
  <button @click="Btnclick" class="btn" :class="[type, size]">
    <slot>按钮</slot>
  </button>
</template>

<style scoped lang="scss">
.primary {
  background-color: #1989fa;
}
.danger {
  background-color: #ee0a24;
}
.default {
  background-color: orange;
}
.btn {
  border: none;
  border-radius: 10px;
}
.normal {
  width: 60px;
  height: 40px;
}
.big {
  width: 100px;
  height: 50px;
}
</style>
